<template>
    <div class="ele-body">
      <!-- 搜索表单 -->
      <spike-search @search="reload"  />
      <el-card shadow="never">
        <!-- 数据表格 -->
        <ele-pro-table ref="table" row-key="id" :columns="columns" :datasource="datasource" :default-expand-all="false" :need-page="true" @done="onDone">
          <!-- 表头工具栏 -->
          <template slot="toolbar">
            <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit({},'1')" >添加</el-button>
            <el-button size="small" icon="el-icon-upload2" class="ele-btn-icon" @click="reportexcel" >导出</el-button>
          </template>
          <!-- 标题列 -->
          <template slot="title" slot-scope="{ row }">
            <i :class="row.icon"></i> {{ row.name }}
          </template>
          <!-- 操作列 -->
          <template slot="action" slot-scope="{ row }">
            <el-link type="primary" :underline="false" icon="el-icon-view"  @click="openEdit(row,'3')">详情</el-link>
            <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row,'2')" >修改</el-link>
            <el-link type="primary" v-show="row.status == 1|| row.status == 100" :underline="false" icon="el-icon-edit" @click="updatestatus(row,5)" >发布</el-link>
            <el-link type="primary" v-show="row.status == 5" :underline="false" icon="el-icon-edit" @click="updatestatus(row,100)" >停用</el-link>
            <el-popconfirm class="ele-action" title="确定要删除吗？" @confirm="remove(row)" >
              <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete" >删除</el-link>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-card>
      <!-- 编辑弹窗 -->
      <spike-edit :data="current" :visible.sync="showEdit" @done="reload" :btnindex="btnindex" />
      <!-- 导出数据 -->
      <ExportDialog ref="ExportDialog"></ExportDialog>
    </div>
  </template>
  
  <script>
    import ExportDialog from '@/components/Excel/ExportDialog'
    import SpikeEdit from './components/spike-edit.vue'
    import SpikeSearch from './components/spike-search.vue';
    import { QuerySpikeByCondition,Delete,UpdateSpike } from '@/api/salesmanager/spike';
    export default {
      name: 'SpikeManager',
      components: { SpikeEdit,SpikeSearch,ExportDialog },
      data() {
        return {
          // 表格列配置
          columns: [
            { columnKey: 'index', type: 'index', width: 55, align: 'center', showOverflowTooltip: true, fixed: 'left', label:'序号', },
            { prop: 'spikeSDate', label: '秒杀开始时间', sortable: 'spikeSDate', showOverflowTooltip: true, 
            formatter: (row, column, cellValue) => {
                return this.$util.toDateString(cellValue);
              }
            },
            { prop: 'spikeEDate', label: '秒杀结束时间', sortable: 'spikeEDate', showOverflowTooltip: true, formatter: (row, column, cellValue) => {
                return this.$util.toDateString(cellValue);
              }
            },
            { prop: 'productName', label: '产品', sortable: 'productId', showOverflowTooltip: true, },
            { prop: 'productItemName', label: '产品规格', sortable: 'productItemId', showOverflowTooltip: true, },
            { prop: 'price', label: '单价', sortable: 'price', showOverflowTooltip: true, },
            { prop: 'limitQty', label: '限购数量', sortable: 'limitQty', showOverflowTooltip: true, },
            { prop: 'createUserName', label: '创建人', showOverflowTooltip: true, align: 'center', sortable: 'createUserName', },
            { prop: 'createDate', label: '创建时间', showOverflowTooltip: true, align: 'center', sortable: 'createDate',
              formatter: (row, column, cellValue) => {
                return this.$util.toDateString(cellValue);
              }
            },
            { prop: 'statusDesc', label: '状态', showOverflowTooltip: true, width: 80, align: 'center', sortable: 'status', },
            { columnKey: 'action', label: '操作', width: 250, align: 'center', resizable: false, slot: 'action', hideInSetting: true, showOverflowTooltip: true }
          ],
          // 当前编辑数据
          current: null,
          //操作按钮索引
          btnindex: '1',
          // 是否显示编辑弹窗
          showEdit: false,
          // 导出列
          exportList: [
            { name: "秒杀开始时间", keys: "spikeSDate", status: true },
            { name: "秒杀结束时间", keys: "spikeEDate", status: true },
            { name: "产品", keys: "productName", status: true },
            { name: "产品规格", keys: "productItemName", status: true },
            { name: "单价", keys: "price", status: true },
            { name: "限购数量", keys: "limitQty", status: true },
            // { name: "已购数量", keys: "limitQty", status: true },
            { name: "创建时间", keys: "createDate", status: true },
            { name: "创建人", keys: "createUserName", status: true },
            { name: "状态", keys: "statusDesc", status: true },
          ]
        };
      },
      methods: {
        /* 表格数据源 */
        async datasource(params) {
          
          params.where.pageindex = params.page;
          params.where.pagesize = params.limit;
  
          //添加排序
          if(params.order.order == null || params.order.order == undefined){
            params.where.orderBys = [{ sort: "createDate", order: 1, }];
          }else{
            params.where.orderBys = [];
            params.where.orderBys.push({sort:params.sorter.column.sortable,order:params.order.order=='asc'?0:1});
          }
          
          let data = await QuerySpikeByCondition(params.where);
  
          return {
            list:data.items,
            count:data.totalrecords,
          };
        },
  
        /* 表格渲染完成回调 */
        onDone({ data }) {
           // 编辑弹窗编辑完成后 done 事件回传表单数据，使用 Object.assign 赋值给 current 即可修改表格的行数据
           if(this.current) {
            Object.assign(this.current, data);
          }
        },
        /* 刷新表格 */
        reload(where) {
          this.$refs.table.reload({ where: where });
        },
        
        /**
         * 显示编辑
         * @param row 当前行对像
         */
        openEdit(row,index) {
          this.current = null;
          this.current = row;
          this.showEdit = true;
          this.btnindex = index;
        },
        /* 删除 */
        remove(row) {
          const loading = this.$loading({ lock: true });
          Delete(row.id)
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        },
          /* 保存编辑 */
        updatestatus(row,status) {
          row.status = status;
          this.loading = true;
          UpdateSpike(row)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.$refs.table.reload();
            })
            .catch((e) => {
              this.loading = false;
              this.$message.error(e.message);
            });
        },
        /* 导出 */
        reportexcel(pams) {
           //初始化参数
          let params = {
            pagesize: 0,
            pageindex: 1,
            conditions: [],
            orderBys: [{ sort: "createDate", order: 1, }],
          };
          //加载进度条
          const loading = this.$loading({ lock: true });
          //重新请求查询
          this.$refs.table.doRequest(({ where }) => {
          if(where){
            params.orderBys = where.orderBys;
            params.pageindex = where.pageindex;
            params.conditions = where.conditions;
          }
          //查询数据
          QuerySpikeByCondition(params)
            .then((data) => {
              loading.close();
              this.$refs.ExportDialog.showEdits = true
              this.$refs.ExportDialog.checkList = this.exportList
              this.$refs.ExportDialog.titleName = "秒杀信息列表"
              this.$refs.ExportDialog.dataList = data;
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
          });
        },
      }
    };
  </script>
  